<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/mygxin.css"/>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="X-admin/lib/layui/layui.js"></script>
    <script src="X-admin/js/xadmin.js"></script>
    <link rel="stylesheet" href="X-admin/css/xadmin.css">
    <link rel="stylesheet" href="X-admin/lib/layui/css/layui.css">
</head>
<body>
<div class="layui-row">
    <form class="layui-form">

        <!---------------------工位名称-------------------->

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>工位名称</label>
            <div class="layui-input-inline">
                <input type="text" id="stname" name="stname" required="" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!---------------------工位单价---------------------->

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>工位单价</label>
            <div class="layui-input-inline">
                <input type="text" id="prices" name="prices" required="" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!--------------------工位场地内容介绍------------------->

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>工位场地内容介绍</label>
            <div class="layui-input-inline">
                <input class="layui-input" autocomplete="off" name="conten" id="conten" required=""></div>
        </div>

        <!-------------------------工位类型----------------------->

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>工位类型</label>
            <div class="layui-input-inline">
                <select id="sttype" name="sttype">
                    <option value="工位">工位</option>
                    <option value="会议厅">会议厅</option>
                    <option value="路演厅">路演厅</option>
                </select>
            </div>
        </div>

        <!-------------------------地址----------------------->

        <div class="layui-form-item">
            <label class="layui-form-label">选择地区</label>
            <div class="layui-input-inline">
                <select name="provid" id="provinceSelect" lay-filter="province">
                    <option value="">请选择省</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="cityid" id="areaSelect" lay-filter="area">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="addrid" id="countySelect" lay-filter="county">
                    <option value="">请选择县/区</option>
                </select>
            </div>
        </div>

        <!-------------------------详细地址---------------------->

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>详细地址</label>
            <div class="layui-input-inline">
                <input class="layui-input" autocomplete="off" name="addres" id="addres" required=""></div>
        </div>

        <!------------------------场地面积----------------------->

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>场地面积</label>
            <div class="layui-input-inline">
                <input class="layui-input" autocomplete="off" name="starea" id="starea" required=""></div>
        </div>

        <!-------------------------状态--------------------------->

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <label>
                    <input type="radio" name="enable" value="1" title="开启" checked="">
                </label>
                <label>
                    <input type="radio" name="enable" value="0" title="关闭">
                </label>
            </div>
        </div>

        <!-------------------------图片--------------------------->

        <div class="layui-form-item">
            <label for="imgHref" class="layui-form-label">
                <span class="x-red">*</span>图片</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="imgHref">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
            <div class="layui-form-mid layui-word-aux"><img src="#" id="showImg" width="200" height="200" alt=""></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button class="layui-btn" lay-filter="add" lay-submit="submit">确认添加</button>
        </div>
    </form>

</div>
</body>

<script>
    var Address_Prefix_Lessors = "http://localhost:9200/api-lessors";
    $(function () {
        start();
        GetAllProvince();
        SetArea();
        SetCounty()
    });

    function start() {
        layui.use('form', function () {
            var form = layui.form;
            upload();
            
            form.on('submit(add)', function (data) {
                    data = data.field;
                    data.topimg = sessionStorage.getItem("image");
                    data.busiid = sessionStorage.getItem("busiid");
                    console.log(data);
                    $.ajax({
                        url: Address_Prefix_Lessors + '/business/station/add',//地址：访问后台的地址
                        data: data,//前端传递给后台的数据
                        type: 'post',
                        async: false,
                        dataType: 'json',//是后端传递到前端的数据格式
                        success: function (data) {//后端给前端的一个反馈
                            console.log(data);
                            if (data.code === 0) {
                                layer.msg("ok！", {time: 1000}, function () {
                                    location.reload();
                                })
                            } else {
                                layer.msg("Not ok！", {time: 1000})
                            }
                        }
                    });
                    return false;
                });
        })
    }


    //图片上传
    function upload() {
        layui.use('upload',function () {
            var upload = layui.upload;
            upload.render({
                elem: '#imgHref',//绑定元素
                url: Address_Prefix_Lessors + '/upload/file',//上传到后端接口
                done: function (res) {//上传完毕回调
                    console.log(res);
                    console.log(res.data);
                    sessionStorage.setItem("image", res.data);
                    $("#showImg").attr("src", res.data);
                },
                error: function () {
                    console.log("回调出错了!")
                    //请求异常回调
                }
            });
        })
    }


    //查询所有{省}
    function GetAllProvince() {
        $.ajax({
            url: Address_Prefix_Lessors + '/business/address/GetAllProvince',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                console.log("省:",data.data);
                layui.use('form',function () {
                    var form = layui.form;
                    for (var i = 0; i < data.data.length; i++) {
                        $('#provinceSelect').append('<option value="' + data.data[i].regiid + '">' + data.data[i].ccname + '</option>')
                    }
                    form.render('select');
                })
            }
        });
    }
    //设值{市} 通过ID
    function SetArea() {
        layui.use('form',function () {
            var form = layui.form;
            form.on('select(province)',function (data) {
                console.log(data.value);
                $.ajax({
                    url: Address_Prefix_Lessors + '/business/address/GetAreaByID',
                    type: 'get',
                    data: {id:data.value},
                    dataType: 'json',
                    success: function (data) {
                        layer.closeAll('loading');
                        $("#areaSelect").empty();
                        layer.closeAll('loading');
                        $("#countySelect").empty();
                        console.log("市",data.data);
                        for (var i = 0 ; i < data.data.length ; i++){
                            $('#areaSelect').append('<option value="'+data.data[i].regiid+'">'+data.data[i].ccname+'</option>')
                        }
                        form.render('select');
                    }
                });
            });
        })
    }
    //设值{区} 通过ID
    function SetCounty() {
        layui.use('form',function () {
            var form = layui.form;

            form.on('select(area)',function (data) {
                layer.closeAll('loading');
                $("#countySelect").empty();
                console.log(data.value);
                $.ajax({
                    url: Address_Prefix_Lessors + '/business/address/GetCountyByID',
                    type: 'get',
                    data: {id:data.value},
                    dataType: 'json',
                    success: function (data) {
                        console.log("区:",data.data);
                        for (var i = 0 ; i < data.data.length ; i++){
                            $('#countySelect').append('<option value="'+data.data[i].regiid+'">'+data.data[i].ccname+'</option>')
                        }
                        form.render('select');
                    }
                });
            })
        })
    }
</script>

</html>
